<template>
  <div class="attribute">
    <div class="title">
      <span>商品属性</span>
      <span>✕</span>
    </div>
    <div class="main">
      <div v-for="item in attribute" :key="item.id" class="item">
        <p>{{ item.attribute }}</p>
        <p>{{ item.value }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps(['attribute'])
</script>

<style scoped>
.attribute {
  width: 100%;
}
.title {
  width: 50%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  /* border: 1px solid #000; */
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.item p:first-child {
  width: 20%;
  /* border: 1px solid #000; */
}
.item p:last-child {
  width: 80%;
  /* border: 1px solid #000; */
}
</style>
